<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
        //ES5
        //$( ) -->> jquery的工厂函数--->> 生成对象
        //          -->> 把DOM对象转换成jquery对象
        //ajax异步访问json
        $(function(){
                $("#name").text("加载...");
                $.ajax({
                    url:"jsonShow",
                    dataType:"json",
                    success:function(res) {
                        var htmlStr = "<table border=\"1\"><tr><td>序号</td><td>姓名</td><td>性别</td><td>年龄</td><td>状态</td><td>操作</td></tr>";
                        $.each(res,function(i,s){
                            htmlStr += "<tr><td>"+(i+1)+"</td><td>"+s.name+"</td><td>"+s.sex+"</td><td>"+s.age+"</td><td>"+s.state+"</td><td><a href='/detele?id="+(s.id)+"'>删除</a></td></tr>";
                        });
                        htmlStr += "</body>";
                        $("#name").html(htmlStr);
                    },
                    error:function(a){
                        alert(a+"失败");
                    }
                });
            })
    </script>
</head>
<body>
<div id="name">显示</div>
</body>
</html>